<template>
	<view class="content">
		<image mode="scaleToFill" style="position:absolute;top:0;width: 100%;" src="data:image/svg+xml,%3Csvg style='background:%2350858b;height:100;width:550' fill='%23EAF4EF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 90c100-70 150 10 250 10q50 0 300-70v270H0V100z'/%3E%3C/svg%3E"></image>
		<image class="logo" src="/static/logo.png"></image>
		
		<view class="form">
			<view class="head">
				<button class="register-btn" @click="register">注 册</button>
				<image src="../../static/logo.png" mode="widthFix"></image>
			</view>
			<view class="input">
				<span>手机 phone number</span>
				<input type="text" value="手机" />
				<span>密码 passwords</span>
				<input type="text" value="密码" />
			</view>
			<view class="footer"><button class="login-btn" @click="login">sign up</button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		register() {},
		login() {
			uni.redirectTo({
				url: '../redirect/register-redirect/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.top{
	width: 100%;
}
.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 300rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100rpx;
	z-index: 99;
	border-radius: 40rpx;
}
.form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% - 40px);
	background: #ffffff;
	border-radius: 60rpx;
	height: 50vh;
	z-index: 99;
}
.head {
	width: calc(100% - 80px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50rpx;
	margin-bottom: 60rpx;
	.register-btn {
		width: 120rpx;
		margin: 0;
		font-size: 20rpx;
		border-radius: 40rpx;
		background: $-color-theme-3;
		color: #ffffff;
		text-align: center;
	}
	image {
		width: 50rpx;
		height: 50rpx;
	}
}
.input {
	width: calc(100% - 80px);
	margin-bottom: 15%;
	input {
		margin: 20rpx;
		width: 100%;
		border-bottom: 1px solid $uni-text-color-disable;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
	}
	span {
		margin: 20rpx;
		color: $uni-text-color-disable;
	}
}
.footer {
	width: calc(100% - 100px);
	.login-btn {
		width: 100%;
		margin: 0;
		font-size: 40rpx;
		border-radius: 60rpx;
		background: $-color-theme-3;
		color: #ffffff;
		text-align: center;
	}
}
</style>
